<!DOCTYPE html>
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"                
                xmlns:f="http://java.sun.com/jsf/core"
                template="./templates/main.xhtml"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:componentes="http://java.sun.com/jsf/composite/componentes">

    <ui:define name="container">
        <div id="content-inicio" class="span12">
            <div>
                <h1>${msg["titulo.sgml"]}</h1>
                <h4>${msg["titulo.industrial"]} - ${msg["titulo.universidad"]}</h4>
                <hr/>
            </div>
            <div class="row-fluid">
                <div class="span8">
                    <div class="well">
                        <p id="lbl-bienvenida">${msg["mensaje.bienvenida"]}</p>
                    </div>
                </div>
                <div class="span4">
                    <div class="well celeste">
                        <h:form>
                            <div>
                                <label>
                                    ${msg['label.user']}
                                </label>
                                <h:inputText 
                                    value="#{loginManager.nombre}"
                                    class="input-block-level">
                                </h:inputText>
                            </div>
                            <div>
                                <label>
                                    ${msg['label.pass']}
                                </label>
                                <h:inputSecret
                                    value="#{loginManager.password}"
                                    class="input-block-level">
                                </h:inputSecret>
                            </div>
                            <div class="control-group error">
                                <div class="help-block">
                                    <h:outputText id="msg-error-login" value="#{loginManager.mensaje}"/>                                    
                                </div>
                            </div>
                            <div>
                                <h:commandButton 
                                    type="submit" 
                                    action="#{loginManager.verificarLogin}" 
                                    value="${msg['accion.login']}" 
                                    class="btn btn-block btn-success">
                                    <f:ajax execute="@form" render="msg-error-login"/>
                                </h:commandButton>
                            </div>                            
                        </h:form>
                        <a href="#!" id="boton-registro">${msg["accion.registrate"]}</a>
                    </div>
                </div>
            </div>
        </div>
        <div id="modal-registro" class="modal hide fade">
            <div class="modal-header">
                <h3>${msg["titulo.registro"]}</h3>
            </div>
            <div class="modal-body">     
                <ul class="nav nav-pills" id="navbar-usuario">
                    <li class="active"><a href="#registro-alumno">${msg["nav.registro.alumno"]}</a></li>
                    <li><a href="#registro-empresa">${msg["nav.registro.empresa"]}</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="registro-alumno">
                        <div class="well celeste">
                            <strong>${msg["mensaje.registrarme"]}</strong><br/><br/>
                            <h:form class="form-horizontal">
                                <div class="control-group">
                                    <div class="control-label">Tus nombres</div>
                                    <div class="controls">
                                        <h:inputText 
                                            value="#{registroManager.persona.nombres}"
                                            required="true"
                                            requiredMessage="Debes ingresar tus nombres.">
                                            <f:ajax execute="@this" event="blur" render="mensajes"/>
                                        </h:inputText>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <div class="control-label">Tus apellidos</div>
                                    <div class="controls">
                                        <h:inputText 
                                            value="#{registroManager.persona.apellidos}"
                                            required="true"
                                            requiredMessage="Debes ingresar tus apellidos.">
                                            <f:ajax execute="@this" event="blur" render="mensajes"/>
                                        </h:inputText>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <div class="control-label">Tu correo electrónico</div>
                                    <div class="controls">
                                        <h:inputText 
                                            value="#{registroManager.persona.email}"
                                            required="true"
                                            requiredMessage="Debes ingresar tu correo electronico.">
                                            <f:ajax execute="@this" event="blur" render="mensajes"/>
                                        </h:inputText>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <div class="control-label">Tu código universitario</div>
                                    <div class="controls">
                                        <h:inputText 
                                            value="#{registroManager.alumno.codigo}"
                                            required="true"
                                            requiredMessage="Debes ingresar tu codigo universitario."
                                            maxlength="10">
                                            <f:ajax execute="@this" event="blur" render="mensajes"/>
                                        </h:inputText>
                                    </div>
                                </div>
                                <componentes:select 
                                    tipo="horizontal"
                                    label="Tu carrera"
                                    value="profesion"/>
                                <div class="control-group">
                                    <div class="control-label">Nombre de usuario</div>
                                    <div class="controls">
                                        <h:inputText 
                                            value="#{registroManager.usuario.nombre}"
                                            required="true"
                                            requiredMessage="Ingresa un nombre para tu usuario.">
                                            <f:ajax execute="@this" event="blur" render="mensajes"/>
                                        </h:inputText>
                                    </div>
                                </div>
                                <div class="control-group">
                                    <div class="control-label">Contraseña</div>
                                    <div class="controls">
                                        <h:inputSecret
                                            value="#{registroManager.usuario.password}"
                                            required="true"
                                            requiredMessage="Ingresa una contraseña para tu usuario.">
                                            <f:ajax execute="@this" event="blur" render="mensajes"/>
                                        </h:inputSecret>
                                    </div>
                                </div>
                                <div class="control-group error">
                                    <div class="help-block">
                                        <h:messages id="mensajes" style="list-style: none;"/>
                                        <h:outputText id="msg-error-registro" value="#{registroManager.mensaje}"/>                                    
                                    </div>
                                </div>
                                <div class="control-group">
                                    <div class="controls">
                                        <h:commandButton 
                                            type="submit"
                                            action="#{registroManager.registrarAlumno}" 
                                            value="${msg['accion.registrarme']}" 
                                            class="btn btn-success btn-small">
                                            <f:ajax execute="@form" render="msg-error-registro"/>
                                        </h:commandButton>
                                    </div>
                                </div>
                            </h:form>
                        </div>                                        
                    </div>
                    <div class="tab-pane" id="registro-empresa">
                        <div class="well celeste">
                            <strong>Muy pronto estará lista esta característica!</strong><br/>
                            <strong>Disculpe las molestias.</strong>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn" data-dismiss="modal">${msg["accion.volver"]}</a>
            </div>
        </div>
    </ui:define>

</ui:composition>

